[#ftl]

[@define "agile.form.LabelField" "agile._Component,agile._Container"]	
	templateString:"<div data-dojo-attach-point='containerNode' class='agileComponent agileLabelField' style='background-color:#fff5ee'>{this_innerWidets}</div>"
	,category:"LabelField Component"
 	,widgetName:"LabelField"
	,templateMap:{
		dojo:"<div {id} {html-style}>{innerWidets}</div>"
		,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
	}	
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		"padding-top":{onValueChange:function(widget,name,value){widget.adjustLabelPosition(widget.metadata("parameters.position"));}}
	   ,"padding-right":{_readOnly:true,onValueChange:function(widget,name,value){widget.adjustLabelPosition(widget.metadata("parameters.position"));}}
	   ,"padding-bottom":{onValueChange:function(widget,name,value){widget.adjustLabelPosition(widget.metadata("parameters.position"));}}
	   ,"padding-left":{_readOnly:true,onValueChange:function(widget,name,value){widget.adjustLabelPosition(widget.metadata("parameters.position"));}}
	})
	,attributes:agile.delegate(agile._Component.prototype.attributes,{
		"showLabel":lang.mixin({},agile.BooleanMetadata,{
			label:'i18n_show_label'
	    	,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){											
	    		if(value){
	    			style.set(widget.label.domNode,{display:'inline'});
	    			//TODO: handle when there is no label
	    			widget.adjustLabelPosition(widget.metadata("parameters.position"));			
	    		}else{
	    			//widget.label.style1("display","none");
	    			style.set(widget.label.domNode,{display:'none'});	    			
	    			//style.set(widget.domNode,{width: widget.field.style1("width") +"px",height: widget.field.style1("height") +"px"});
	    			widget.style1("width",widget.field.dimension.width);
	    			widget.style1("height",widget.field.dimension.height);
	    			widget.field.style1("left",1);
	    			widget.field.style1("top",1);
	    		}
//	    		widget.metadata(name,value);
	    		widget.metadata(this.metadataCategory+"."+name,value);
	    		////console.log("@@@@@",widget.attributes["position"]);
	    		//widget.attributes["position"].editorWidget.set("readOnly",true);	    		
			}
			,ignore:function(widget,sourceType){
				return sourceType != "agile";
			}
	    })
		,"position": lang.mixin({},agile.ComboMetadata,{
			label:'i18n_label_position'
			//,options:agile.i18nMap(["left","right","top","bottom"],null,true)
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
				widget.adjustLabelPosition(value);
				widget.metadata(this.metadataCategory+"."+name,value);
			}	
			,ignore:function(widget,sourceType){
				return sourceType != "agile";
			}
			,initOptions:function(){
				var options = agile.i18nMap(["left","right","top","bottom"],null,true);
				return options;
			}
		})
//		,"padding": lang.mixin({},agile.NumberMetadata,{
//			label:'i18n_label_padding'		
//			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
//				widget.metadata(this.metadataCategory+"."+name,value);
//				widget.adjustLabelPosition(widget.metadata("parameters.position"));
//				widget.dimension.padding = value;
//			}
//			,ignore:function(widget,sourceType){
//				return sourceType != "agile";
//			}
//		})
	})	
	,initDefaultMetadata:function(){
		this.metadata("parameters.position","left");
		this.metadata("parameters.showLabel",true);	
		this.metadata("parameters.label","Text");
		this.metadata("parameters.field","TextBox");
		this.metadata("parameters.value","");
//		this.metadata("parameters.padding",10);
		this.metadata("style.padding-left",1);
		this.metadata("style.padding-top",1);
		this.metadata("style.padding-right",1);
		this.metadata("style.padding-bottom",2);
		this.padding = 10;
		//this.metadata("childMoveable",false);
	}
	,constructor:function(params,node){
//		console.log(this.declaredClass,"params=",params,",node=",node);
		if(node == undefined){
			this.innerWidets = lang.replace('<div data-dojo-type="agile.form.Label" data-dojo-props=\'resizeAxis:"x",editor:"dijit.form.TextBox"\'>{label}</div><div data-dojo-type="{field}"></div>',params);
		}else{
			this.innerWidets = "";
		}
	}	
	,init:function(){
		if(this._initLabelField) return; this._initLabelField = true;
	
		query(">.agileLabel",this.domNode).forEach(function(node){
			this.label = registry.byNode(node);
			this.label.metadata("moveable",false);
		},this);
					
		query(">.agileField",this.domNode).forEach(function(node){
			this.field = registry.byNode(node);
			this.field.metadata("moveable",false);
		},this);
		
		//domClass.add(this.domNode,"agileComponent agileLabelField");
		if(this.field.metadata("required")){
			
		}	
		if(!this.metadata("parameters.showLabel")){
			style.set(this.label.domNode,{display:'none'});
		}
		
//		this.field.metadata("anchor",{left:0,top:0});
//		this.label.metadata("anchor",{left:0,top:0});
		this.label.on("resizeStop",lang.hitch(this,"postResize")); 
		this.field.on("resizeStop",lang.hitch(this,"postResize"));		

//		var height = this.field.dimension.height,width = this.field.dimension.width + this.label.dimension.width + this.padding;
//		this.style1("height",height);
//		this.style1("width",width);
//		style.set(this.domNode,{padding:"1px 2px 2px 1px"});
//		this.label.style1("left",1);
//		this.field.style1("left",this.label.dimension.width + this.padding);
		this.adjustLabelPosition(this.metadata("parameters.position"));		
		//console.log("@@@@@@@@@style=",this.metadata("style"));
		
	}
//	,onPaddingChanged:function(name,value){
//		this.adjustLabelPosition(this.metadata("parameters.position"));
//	}
	,adjustLabelPosition:function(newPostion){
//		console.log("this.dimension=",this.dimension,",this.field.dimension=",this.field.dimension,",this.label.dimension=",this.label.dimension);
		switch(newPostion){
			case "left":			
				this.label.style1("left",this.dimension["padding-left"]);
				this.label.style1("top",this.dimension["padding-top"]);
				this.field.style1("left",this.label.dimension.width + this.padding + this.dimension["padding-left"]);				
				this.field.style1("top",this.dimension["padding-top"]);				
//				style.set(this.domNode,{width: (this.label.dimension.width + this.field.dimension.width + this.padding + 2) +"px",height:(this.field.dimension.height + 2) +"px"});
				this.style1("height",this.field.dimension.height);
				this.style1("width",this.label.dimension.width + this.field.dimension.width + this.padding + this.dimension["padding-left"] + this.dimension["padding-right"]);
			 break;
			case "right":
				this.label.style1("left",this.field.dimension.width + this.padding + this.dimension["padding-left"]);
				this.label.style1("top",this.dimension["padding-top"]);
				this.field.style1("left",this.dimension["padding-left"]);
				this.field.style1("top",this.dimension["padding-top"]);
//				style.set(this.domNode,{width: (this.label.dimension.width + this.field.dimension.width + this.padding + 2) +"px",height:(this.field.dimension.height + 2) +"px"});
				this.style1("height",this.field.dimension.height);
				this.style1("width",this.label.dimension.width + this.field.dimension.width + this.padding + this.dimension["padding-left"] + this.dimension["padding-right"]);
				break;
			case "top":
				this.label.style1("left",this.dimension["padding-left"]);
				this.label.style1("top",this.dimension["padding-top"]);
				this.field.style1("left",this.dimension["padding-left"]);
				this.field.style1("top",this.label.dimension.height+ this.padding + this.dimension["padding-top"]);
//				style.set(this.domNode,{width: (this.field.dimension.width + 2) +"px",height:(this.field.dimension.height + this.label.dimension.height + this.padding + 2) +"px"});
				this.style1("height",this.field.dimension.height + this.label.dimension.height + this.padding);
				this.style1("width",this.field.dimension.width + this.dimension["padding-left"] + this.dimension["padding-right"]);
				break;
			case "bottom":
				this.label.style1("left",this.dimension["padding-left"]);
				this.label.style1("top",this.field.dimension.height+ this.padding + this.dimension["padding-top"]);
				this.field.style1("left",this.dimension["padding-left"]);
				this.field.style1("top",this.dimension["padding-top"]);
//				style.set(this.domNode,{width: (this.field.dimension.width + 2) +"px",height:(this.field.dimension.height + this.label.dimension.height + this.padding + 2) +"px"});
				this.style1("height",this.field.dimension.height + this.label.dimension.height + this.padding);
				this.style1("width",this.field.dimension.width + this.dimension["padding-left"] + this.dimension["padding-right"]);
				break;
		}
	}
	,postResize:function(){
		var height1 = this.metadata("style.height");
		var width1 = this.metadata("style.width");
		
		this.adjustLabelPosition(this.metadata("parameters.position"));
		
		var height2 = this.metadata("style.height");
		var width2 = this.metadata("style.width");
		var operations = [];
		if(height1 != height2){
			operations.push({action:"update",target:this,category:"style",property:"height",beforeValue:height1,afterValue:height2});
			operations.push({action:"undo",context:this,callback:function(){
				this.adjustLabelPosition(this.metadata("parameters.position"));
			}});
		}
		if(width1 != width2){
			operations.push({action:"update",target:this,category:"style",property:"width",beforeValue:width1,afterValue:width2});			
			operations.push({action:"undo",context:this,callback:function(){
				this.adjustLabelPosition(this.metadata("parameters.position"));
			}});			
		}
		if(operations.length > 0){
			agile.commit(operations);
		}
//		switch(this.metadata("parameters.position")){
//			case "left":			
//				console.log("position:left");
////				style.set(this.domNode,{width: (this.label.dimension.width + this.field.dimension.width + this.padding) +"px"});
//				this.style1("width",this.label.dimension.width + this.field.dimension.width + this.padding);
//				this.field.style1("left",this.label.dimension.width + this.padding);
//				break;
//			case "right":
//				console.log("position:right");
////				style.set(this.domNode,{width: (this.label.dimension.width + this.field.dimension.width + this.padding) +"px"});
//				this.style1("width",this.label.dimension.width + this.field.dimension.width + this.padding);
//				this.label.style1("left",this.field.dimension.width + this.padding);
//				break;
//			case "top":
//				
//				break;
//			case "bottom":
//				
//				break;	
//		}
	}
//	,serializeStyle2:function(sourceType){
//		var style = this.inherited(arguments);
//		if(style && sourceType == "dojo"){
//			//style = style.replace("style:","style=");
//		}
//		return style;
//	}
	,getInnerWidgetTemplate:function(params){
		var template = "";
		if(this.metadata("parameters.showLabel") && this.label){
			template += this.label.toHtml(params);
		}
		template += this.field.toHtml(params);
	
		return template;
	}	
[/@]
